<template>
  <div>
    <div id="down">
      <div class="person_center">个人中心 》下载中心</div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="图片" name="first">
          <div class="pic">
            <ul class="pic_ul">
              <li class="pic_li" v-for="(item,index) of currentPageData" :key="index">
                <div
                  @click="tankuang(index)"
                  v-if="currentPageData"
                  style="display:flex;flex-direction:column;justify-content:center"
                >
                  <img
                    :src="loadown+item.filePath"
                    style="width:250px;height:200px;object-fit:contain;object-position: top;"
                    alt
                  />
                  <!-- v-if="item.length!=0" -->
                  <p class="name">{{item.fileName}}</p>
                </div>
                <!-- 图片弹框 点击tabkuang按钮触发图片弹框-->
                <div class="tankuang_bg">
                  <el-dialog
                    :visible.sync="dialogTableVisible"
                    :fullscreen="true"
                    :modal="false"
                    :center="true"
                  >
                    <div class="content_k">
                      <p class="tankuang_name">{{currentPageData[xiabiao].fileName}}</p>
                      <div class="content_img">
                        <img
                          :src="loadown+currentPageData[xiabiao].filePath"
                          style="width:350px;"
                          alt
                        />
                        <!-- <div
                          class="load_pic"
                          :style="{background:'url('+loadown+item.filePath+')'}"
                        ></div>-->
                      </div>
                      <div class="content_btn" @click="close()">
                        <a
                          v-if="currentPageData[xiabiao]"
                          id="a1"
                          class="loadown"
                          :href="`${loadown}/volunteer/apply/downloads?filePath=` + currentPageData[xiabiao].fileName"
                        >立即下载</a>
                      </div>
                    </div>
                  </el-dialog>
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="视频" name="second">
          <div class="pic">
            <ul class="pic_ul">
              <li class="pic_li" v-for="(item,index) of currentPageData" :key="index">
                <div v-if="currentPageData" @click="tankuang2(index)">
                  <video style="width:250px;height:145px;" :src="loadown+item.filePath"></video>

                  <p class="name">{{item.fileName}}</p>
                </div>
                <!-- 视频弹框 点击tankuang2触发-->
                <div class="tankuang_bg">
                  <el-dialog
                    :visible.sync="dialogTableVisible"
                    :fullscreen="true"
                    :modal="false"
                    :center="true"
                  >
                    <div class="content_k">
                      <p
                        class="tankuang_name"
                        v-if="currentPageData[xiabiao2]"
                      >{{currentPageData[xiabiao2].fileName}}</p>
                      <div class="content_img">
                        <video
                          preload="auto"
                          :src="loadown+currentPageData[xiabiao2].filePath"
                          controls="controls"
                        ></video>
                      </div>
                      <div class="content_btn" @click="close()">
                        <a
                          v-if="currentPageData[xiabiao2]"
                          id="a1"
                          class="loadown"
                          :href="`${loadown}/volunteer/apply/downloads?filePath=` + currentPageData[xiabiao2].fileName"
                        >点击下载</a>
                      </div>
                    </div>
                  </el-dialog>
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="文档" name="third">
          <div class="wengdang">
            <ul class="wengdang_ul">
              <li
                class="wengdang_li"
                @click="tankuang3(index)"
                v-for="(item,index) of currentPageData"
                :key="index"
              >
                <p>{{item.fileName}}</p>
                <span>{{item.createTime}}</span>
              </li>
            </ul>
            <!-- 文档弹框 -->
            <div class="tankuang_bg">
              <el-dialog
                :visible.sync="dialogTableVisible"
                :fullscreen="true"
                :modal="false"
                :center="true"
              >
                <div class="content_k">
                  <p
                    class="tankuang_name"
                    v-if="currentPageData[xiabiao3]"
                  >{{currentPageData[xiabiao3].fileName}}</p>
                  <div class="content_img"></div>
                  <div class="content_btn" @click="close()">
                    <a
                      v-if="currentPageData[xiabiao3]"
                      id="a1"
                      class="loadown"
                      :href="`${loadown}/volunteer/apply/downloads?filePath=` + currentPageData[xiabiao3].fileName"
                    >点击下载</a>
                  </div>
                </div>
              </el-dialog>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div id="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :pager-count="5"
          :page-size="pageSize"
          layout="  prev, pager, next"
          :total="this.totalPage"
        ></el-pagination>
      </div>
    </div>

    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
export default {
  data() {
    return {
      xiabiao: 0,
      xiabiao2: 0,
      xiabiao3: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      activeName: "first",
      choose: "",
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 8, // 每页显示数量
      currentPageData: [],

      vid: "vid",
      img: "img",
      file: "file",

      sort: "img",
    };
  },
  components: {
    foot2: foot2,
  },
  created() {
    this.setCurrentPageData();
    this.getData();
  },
  methods: {
    close() {
      this.dialogTableVisible = false;
    },
    tankuang(index) {
      this.dialogTableVisible = true;
      this.xiabiao = index;
    },
    tankuang2(index) {
      this.dialogTableVisible = true;
      this.xiabiao2 = index;
    },
    tankuang3(index) {
      this.dialogTableVisible = true;
      this.xiabiao3 = index;
    },
    //切换导航
    handleClick(tab, event) {
      // console.log(tab.label);
      this.xiabiao = 0;
      this.xiabiao2 = 0;
      this.xiabiao3 = 0;
      this.sort = tab.label;
      this.setCurrentPageData();
      //
    },
    //渲染数据
    setCurrentPageData() {
      if (this.sort == "图片") {
        this.sort = this.img;
        this.getData();
      } else if (this.sort == "视频") {
        this.sort = this.vid;
        this.getData();

        // console.log(this.sort);
      } else if (this.sort == "文档") {
        this.sort = this.file;
        this.getData();
      }
    },
    getData() {
      this.$api
        .get(
          `${this.zs}/download/img/page?status=${this.sort}&pageNumber=${this.currentPage}&pageSize=${this.pageSize}`
        )
        .then((res) => {
          // 计算一共有几页
          // console.log(res.data.data.list);
          this.totalPage = res.data.data.totalPage;
          this.currentPageData = res.data.data.list;
          // console.log(this.currentPageData, 111);
        });
    },
    //分页
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
        // console.log(val)
      }
      if (this.sort == "图片") {
        this.sort = this.img;
      } else if (this.sort == "视频") {
        this.sort = this.vid;
      } else if (this.sort == "文档") {
        this.sort = this.file;
      }
      // this.page = val;
      this.setCurrentPageData(
        `${this.zs}/download/img/page?status=${this.sort}&pageNumber=${this.currentPage}&pageSize=${this.pageSize}`
      );
    },
  },
  watch: {
    sort() {
      this.currentPage = 1;
      this.setCurrentPageData();
    },
  },
};
</script>
<style scoped>
li {
  list-style: none;
}
ul,
li,
p {
  padding: 0px;
  margin: 0px;
}
#down {
  width: 1200px;
  margin: auto;
  padding-top: 38px;
}
.person_center {
  margin-bottom: 63px;
}
#down .el-tabs__item {
  font-size: 24px;
}
#down >>> .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border-bottom: 1px solid #bcccfa;
}
#down >>> .el-tabs__item.is-active {
  background: #bcccfa;
  color: #333333;
}
#down >>> .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 0px;
}
#down >>> .shiping_ul,
#down >>> .pic_ul {
  margin-bottom: 65px;
  margin-top: 110px;
}

#down >>> .wengdang_ul {
  margin-bottom: 65px;
}
#down >>> .shiping_li,
#down >>> .pic_li {
  position: relative;
}
/* 如果最后一行是3个元素 */
.pic_li:last-child:nth-child(4n - 1) {
  margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.pic_li:last-child:nth-child(4n - 2) {
  margin-right: calc(48% + 8% / 3);
}
#down >>> .el-tabs__content {
  min-height: 500px;
}
#down >>> .el-dialog {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#down >>> .el-dialog .tankuang_name {
  margin-bottom: 20px;
}
#down >>> .el-dialog__wrapper {
  background: white;
}

.content_k {
  /* border: 1px solid red; */
  /* width: 80%;
  height: 845px; */
  display: flex;
  flex-direction: column;
  margin: auto;
  text-align: center;

  justify-content: space-evenly;
}
.content_img,
.countent_btn {
  text-align: center;
  margin-bottom: 60px;
}
.loadown {
  width: 250px;
  height: 50px;
  text-decoration: none;
  background: darkblue;
  color: white;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  border-radius: 5px;
  border-radius: 3px;
}

.name,
.name p {
  padding: 20px 0 30px;
  box-sizing: border-box;
  text-align: center;
}

.shiping_ul,
.pic_ul {
  display: flex;
  max-width: 1200px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sp_anniu {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: 32px;
  margin-left: 90px;
}
.wengdang_li {
  display: flex;
  color: #333333;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 30px 60px 12px;
  border-bottom: 1px solid #b2b2b2;
}
.load_pic {
  width: 350px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* background-position: center; */
}
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-dialog {
  width: 100%;
  height: 100%;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#page >>> .el-dialog__wrapper {
  background: rgba(225, 225, 225, 0.05);
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>